import { useLayoutEffect, useRef } from "react";
import Row from "./Row";
import jQuery from "jquery";
import { useForm } from "../../framework/common/context/metadata-context";
export default function ({ group,groupRef }) {

  const metadataManager = useForm();

  let defaultWidth= 1040;
  if(metadataManager.mode==="Print"){
    defaultWidth= 1018
  }
  //运行时主表表单宽度时1040 ，设计时默认744，并且会动态变大，再colspan的有些情况下，设计时group?.style?.width字段有Bug
  let scale = defaultWidth / (group?.style?.width || 744);

  const tableRef=useRef()
  useLayoutEffect(()=>{
    if(jQuery(tableRef.current).width()<defaultWidth){
      jQuery(tableRef.current).width(defaultWidth)
    }
  // console.log(jQuery(tableRef.current).width())

  })
  return (
    <table ref={tableRef} className="w-full mt-2 table-process-form table-main">
      <tbody>
        {group.rows?.map((row, index) => (
          <Row group={group} groupRef={groupRef} scale={scale} rowIndex={index} key={index} row={row} firstRow={group.rows[0]}></Row>
        ))}
      </tbody>
    </table>
  );
}
